
<!DOCTYPE HTML>
<html>
<head>
<title>二级联动列表</title>
<meta charset="utf-8" />
<style>
	.hide{ display: none; }
</style>


</head>
<body>
	<select name="provs">
		<option>—请选择—</option>
		<option>北京市</option>
		<option>天津市</option>
		<option>河北省</option>
	</select>
	
	<select name="cities" class="hide">
		
	</select>
	
	<script>
		var cities=[//JSON：javascript object notation数据
			[],		/*0号下标没有元素*/
			[{"name":'东城区',"value":101},
			 {"name":'西城区',"value":102},
			 {"name":'海淀区',"value":103},
			 {"name":'朝阳区',"value":104},],
			[{"name":'河东区',"value":201},
			 {"name":'河西区',"value":202},
			 {"name":'南开区',"value":203}],
			[{"name":'石家庄市',"value":301},
			 {"name":'廊坊市',"value":302},
			 {"name":'保定市',"value":303},
			 {"name":'唐山市',"value":304},
			 {"name":'秦皇岛市',"value":305}]
		];
		//根据数据渲染一个二级联动
		var selects=document.querySelectorAll("select");
		selects[0].onchange=function(){
			var i=this.selectedIndex;
			if(i>0){
				selects[1].innerHTML="";
				selects[1].className="";
				for(var j=0;j<cities[i].length;j++){
					selects[1].add(new Option(cities[i][j].name,cities[i][j].value));
				}
			}else{
				selects[1].className="hide";
				selects[1].innerHTML="";
			}
		}
		
	</script>
</body>
</html>
